<!DOCTYPE html>
<html>
  <head>
     <link rel='stylesheet' href='/stylesheets/chatting.css' />
     <link rel='stylesheet' href='/stylesheets/setting.css' />
      <meta name="viewport" content="width=device-width, initial-scale=1">


      <script src="js/index.min.js"></script>
      <script src="/socket.io/socket.io.js"></script>

  </head>

  <style>

      p,a,h5,h6,img {
          -webkit-touch-callout: none; /* iOS Safari */
          -webkit-user-select: none; /* Chrome/Safari/Opera */
          -khtml-user-select: none; /* Konqueror */
          -moz-user-select: none; /* Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
          user-select: none;
      }


      *{

      margin: 0px;
      padding: 0px;
    }

    body{

      margin: 0px;
      padding: 0px;
    }

    #visibleBox{

      width: 100%;
      height: 100%;
      position: absolute;

    }

    #title_info{

      color: white;
      font-size: 2.4rem;
      text-align: center;
      padding:12px;
    }

    #innerBox{

      width: 100%;
      height: 100%;
      overflow-x: hidden;
      overflow-y: scroll;

    }

    #chattingBox{

        width: 100%;
        /*background-color: aquamarine;*/
        height: auto;
        padding-bottom: 160px;
    }
    #chattingBox::-webkit-scrollbar { display: none; }

    #new_info{

        width: 0%;
        height: 100%;
        background-color: black;
        overflow: hidden;
    }

    #new_info .tit{

        color: grey;
        font-size: 0.8rem;
        text-align: center;
        padding: 4px;
    }
      .author{

         color: grey;
         font-size: 0.8rem;
          padding-top: 4px;
          padding-left: 16px;
     }

      #new_info .author_info{

          display: flex;
          width: 86%;
          height: 80px;
          margin-left: 6%;
      }

    #new_info .author_info img{
        margin-top: 8px;
        width: 60px;
        height:60px;
        border-radius: 2px;
        box-shadow: 0.1px 0.2px 3px 0.4px rgba(120,120,102,0.6);
    }

    #new_info .author_info .author_name{

        width: calc(100% - 60px - 6px);
        font-size: 0.8rem;
        color: grey;
        /*background-color: yellow;*/
        position: relative;
        margin-left: 6px;
    }

    .author_name .name{

        padding-top: 10px;
        padding-left: 4px;
        font-size: 1.0rem;
    }

    .author_name .createtime{

        padding-top: 4px;
        padding-left: 4px;
        font-size: 0.8rem;
    }

    #new_info .topic{

        width: calc(86% - 16px);
        height: 104px;
        padding: 8px;
        /*background-color: grey;*/
        margin-left: 6%;
        border: 1px solid rgba(120,120,120,0.8);
        border-radius: 6px;
        box-shadow: 0px 1px 2px 0.4px rgba(120,120,120,0.2);
        margin-bottom: 12px;
        color: white;
    }

    #setingBox{

        width: 100%;
        height: 100px;
        position: fixed;
        overflow: hidden;
        top: calc(100% - 100px);
        /*background-color: gold;*/
    }

    #setingBoxs{

        width: 80%;
        border-radius: 6px;
        background-color:rgba(120,120,120,120.8);
        height: 80%;
        overflow: hidden;
        position: absolute;
        margin-left: 10%;
        margin-top: 20%;
        /*display: none;*/
        /*background-color: gold;*/
    }

      #addbtn{

          width: 36px;
          height: 36px;
          /*background-color: aquamarine;*/
          border-radius: 50%;
          border: 2px solid white;
          position: absolute;
          box-shadow: 0.2px 0.2px 4px 0.4px rgba(120,100,120,0.3);
          z-index: 120;
      }
      #addbtn img{

          width: 24px;
          height: 24px;
          position: relative;
          left: 50%;
          margin-left: -12px;
          transition: all ease 0.2s;
          margin-top: 6px;
      }

      #anotherBox{

          width: 100%;
          height: 356px;
          /*background-color: rgba(120,120,120,0.5);*/
      }

    #anotherBox #beforeBox{

        display: inline-block;
        width: 86%;
        height: 60px;
        margin-left: 6%;
        /*background-color: ;*/
        border-radius: 4px;
        margin-top: 6px;
        margin-bottom: 6px;
        cursor: pointer;
    }

    #anotherBox #beforeBox:active{

        opacity: 0.6;
    }
    #beforeBox img{

        width: 30px;
        height: 30px;
        position: relative;
        top: 50%;
        margin-top: -15px;
        margin-left: 8px;

    }

    .beforeBoxs{

        display: inline-block;
        width: 86%;
        height: 60px;
        margin-left: 6%;
        /*background-color: ;*/

        border-radius: 4px;
        margin-top: 6px;
        margin-bottom: 6px;
        /*cursor: pointer;*/

    }
    #beforeBox p{

        padding-top: 22px;
        padding-left: 4px;
        color: rgba(120,120,120,0.9);

    }
    #hiddenBox{

        width: calc(100% - 4px);
        height: 280px;
        background-color:rgba(0,0,0,0.6);
        position: relative;
        border: 2px solid white;
        /*margin-top: 200px;*/
        z-index: 100;
        margin-top: 50px;
        transition:  all ease-in 0.2s;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }
   #hiddenBox p{

       padding-top: 12px;
       text-align: center;
       color: white;
   }

    #hiddenBox .inputs{

        width: calc(80% - 16px);
        margin-left: 10%;
        padding: 8px;
        margin-top: 12px;
        font-size: 0.8rem;
        border-radius: 4px;
        outline: none;
        background-color:rgba(10,0,0,0);
        border: 1px solid rgba(255,255,255,0.8);
        color: white;
    }

      #hiddenBox .toptype{

          margin-bottom: 8px;
          width: 80%;
          height: 28px;
          /*background-color: bisque;*/
          margin-left: 10%;
          display: flex;
      }

      #hiddenBox .toptype .item{

          width: 20%;
          height: calc(100% - 4px);
          border-radius: 4px;
          background-color: gainsboro;
          margin-left: 2px;
          margin-right: 2px;
          padding-top: 4px;
          text-align: center;
          color: gray;
          cursor: pointer;
      }

      #hiddenBox #postbtn {

          width: 60px;
          height: 32px;
          /*background-color: #00B7FF;*/
          border-radius: 4px;
          border: 1px solid white;
          color: white;
          position: relative;
          left: 100%;
          margin-left: -70px;
          box-shadow: 0.1px 0.2px 0.4px 0.4px rgba(120,120,120,0.6);
          cursor: default;
      }

    #hiddenBox #postbtn:active{

        opacity: 0.6;
    }

  </style>
  <body>
  <canvas id="containerg" width="261" height="463" style="position:fixed;top:0;left:0;width:100%;height:100%;z-index: 1"></canvas>
   <div id="visibleBox" style="z-index: 2">
     <div id="innerBox">
        <div id="chattingBox" style="transition: all ease-out 0.4s">
            <div id="innerLine"></div>
            <div class="line" id="lineBox">
                <div class="chattingboxleft clearfix">

                    <div class="headerface">
                            <img src="images/face4.jpg">
                    </div>
                    <p class="createname" >withtimer  </p>
                    <p class="createtime">.....</p>
                    <div class="chattingcontent">
                    来随便唠嗑
                    </div>
                </div>


                <div class="chattingboxright clearfix">
                    <div class="headerface">
                        <img src="images/face4.jpg">
                    </div>
                    <p class="createname">withtimer  </p>
                    <p class="createtime">2018.08.12  </p>
                    <div class="chattingcontent">想说啥说啥</div>
                </div>

            </div>

        </div>
         <div id="setingBox" style="display: block">
             <div class="inputBoxs" style="display: flex">
                 <input placeholder="说点什么吧....." rows="3" id="chatInput"></input>
                 <div id="senfBtn"><p>Send</p></div>

             </div>
             <div class="aboutme" id="aboutme">

             </div>
         </div>


     </div>

   </div>

  <script>

    let currentFace="/images/face"+(1+Math.floor(Math.random()*9))+".jpg";
    let curentNickName=""+new Date().getTime();
    let isOnTip=false;
    let currentIndexEnd = 60;
    let ison=false;
    let isEdit=false;
    let isSHowEmoj=false;
    var socket = io();
    let http=new XMLHttpRequest();
    let isLogin=false;


    //socket接收事件。。。
    socket.on("send", function(msg){

        let targetParent=document.getElementById("lineBox");
        let example=targetParent.children[2];
        let newItem=example.cloneNode(true);

        newItem.children[0].children[0].src=msg.userface;
        newItem.children[1].innerHTML=msg.nickname;
        newItem.children[2].innerHTML=msg.createtime;
        newItem.children[3].innerHTML=msg.chatcontent;
        targetParent.appendChild(newItem);
        ScrollToBotton();
        // updateDate();
    });
    window.onload=function () {

      let target=document.getElementById("visibleBox");
      let height=window.innerHeight;
      target.style.height=height+'px';
      let innerBox=document.getElementById("innerBox");




        // 展示页面
       let showCard=document.getElementById("aboutme");

        if(showCard!=null){
            let pnode=document.getElementById("setingBox");
            showCard.style.width=(pnode.offsetWidth*0.86)+"px";
            showCard.style.marginLeft=pnode.offsetWidth*0.06+"px";
        }

        //提交按钮事件

        //快速菜单的按钮控制
        let offsetHeight=document.getElementById("chattingBox").offsetHeight;


        //创建表情
        let targetBox=document.getElementById("senfBtn");

        if(targetBox!=null){

            isLogin=true;
            //发送信息
            let send=document.getElementById("senfBtn");
            console.log("BingDone");
            send.addEventListener("click",SendMsg,false);
        }


        let tipBtn=document.getElementById("tipBtn");

        if(tipBtn!=null){
            tipBtn.addEventListener("click",TipEvent,false);
        }

        //注册和登录

        let loginBtn=document.getElementById("loginBtn");

        if(loginBtn!=null){
            loginBtn.addEventListener("click",LoginEvent,false);
        }

        let loginBtns=document.getElementById("loginBtns");
        if(loginBtns!=null){


            loginBtns.addEventListener("click",LoginEvent,false);

        }

        getTheLineInfo();

    };

    function check(v) {

       if(v.length<6||v.length>20){

         let target= document.getElementById("number");
           target.style.borderColor="red";
       }else{
           let target= document.getElementById("number");
           target.style.borderColor="white";
       }
    }

    function checks(v) {

        if(v.length<6||v.length>20){

            let target= document.getElementById("pass");
            target.style.borderColor="red";
        }else{
            let target= document.getElementById("pass");
            target.style.borderColor="white";
        }
    }

    function checkss(v) {

        if(v.length<2||v.length>8){

            let target= document.getElementById("nick");
            target.style.borderColor="red";
        }else{
            let target= document.getElementById("nick");
            target.style.borderColor="white";
        }
    }

    function LoginEvent(e) {

        let tag=e.target.getAttribute("tag");
        let numNode=document.getElementById("number");
        let passNode=document.getElementById("pass");
        let nickName=document.getElementById("nick");
        let num=numNode.value;
        let pass=passNode.value;
        let nickname=nickName.value;

        if((num.length>=6&&num.length<=20)&&(pass.length>=6&&pass.length<=20)){

            //发送请求

            if(tag=="0") {

                //登录操作
                let url="/toLogin?num="+num+"&pass="+pass;
                http.open("POST",url,true);
                http.send();

            }else {

                // 注册操作
                 if(nickname.length>=2&&nickname.length<=8){

                     let url="/toSign?num="+num+"&pass="+pass+"&nick="+nickname;
                     curentNickName=nickName;
                     http.open("POST",url,true);
                     http.send();
                 }
            }

        }else{
            //输入错误

            return;
        }

        http.onreadystatechange=function()
        {
            if (http.readyState==4 && http.status==200)
            {

                window.location.reload();
            }
        }
    }
    function TipEvent() {
      if(!isOnTip){
          let targetBox=document.getElementById("tipBox");
          targetBox.style.maxHeight="180px";
      }else {
          let targetBox=document.getElementById("tipBox");
          targetBox.style.maxHeight="0px";
      }

      isOnTip=!isOnTip;

    }

    function  showMeEvent(e) {

        let tag=e.target.getAttribute("tag");

        if(tag=="0"){


            window.open("https://gitee.com/withtime/events")
            //去git
            // window.location=";

        }else{

            //去更多
            window.open("https://gitee.com/withtime/events")
        }
    }


    //展开表情
    function ShowEmoj() {

        let target=document.getElementById("emjHideBox");
        let aboutMe=document.getElementById("aboutme");
        if(!isSHowEmoj){

            target.style.marginTop="0px";
            aboutMe.style.opacity="0";
        }else{

            target.style.marginTop="260px";
            aboutMe.style.opacity="1";
        }
        isSHowEmoj=!isSHowEmoj;

    }


    //快捷菜单事件e
    function  FaseterEvent(e) {

        let tag=e.target.getAttribute("tag");
        let target=document.getElementById("chattingBox");
        let line=document.getElementById("lineBox");
        let lineheight=line.offsetHeight;
        let currentTopOffset=target.scrollTop;
        if(tag=="up"){
            //向上滚动

            if(currentTopOffset>=200){

                let timer=null;
                let offsetTop=0;
                timer=setInterval(()=>{

                    offsetTop+=4;
                    if(offsetTop>=200){
                        clearInterval(timer);
                        timer=null;
                    }
                    target.scrollTop=currentTopOffset-offsetTop;
                },0.4);
            }



        }else{
            //向下滚动
            if(lineheight>=(target.offsetHeight)){

                let timer=null;
                let offsetTop=0;
                timer=setInterval(()=>{

                    offsetTop+=4;
                    if(offsetTop>=200){
                        clearInterval(timer);
                        timer=null;
                    }
                    target.scrollTop=currentTopOffset+offsetTop;
                },0.4);
            }
        }



    }

    function initLayout() {



    }
    //滚动到最底部
    function ScrollToBotton() {

        let target=document.getElementById("innerBox");
        target.scrollTop=target.scrollHeight;

    }



    function  addBtnclick() {

        let hiddenbox=document.getElementById("hiddenBox");
        let btn = document.getElementById("addbtn").children[0];
        if(!ison){
            btn.style.transform="rotate(0deg)";
            hiddenbox.style.marginTop=-hiddenbox.offsetHeight+30+"px";
        }else {
            btn.style.transform="rotate(-135deg)";
            hiddenbox.style.marginTop="50px";
        }
        ison=!ison;
    }

    function  SelectType(e) {

        let valueTag=e.target.getAttribute("checked");
        if(valueTag=="0"){

            e.target.setAttribute("checked","1");
            e.target.style.color="white";
            e.target.style.backgroundColor="red";
        }else{

            e.target.setAttribute("checked","0");
            e.target.style.color=" gray";
            e.target.style.backgroundColor="gainsboro";
        }
    }



    function  SendMsg() {

        let inputCtrl=document.getElementById("chatInput");
        if(inputCtrl.value!=""&&!isEdit){

           let currentData=new Date();
           let mytime=currentData.toLocaleTimeString(); //获取当前时间
           let targetParent=document.getElementById("lineBox");
           let example=targetParent.children[0];
           let newItem=example.cloneNode(true);
           newItem.children[0].children[0].src=currentFace;
           newItem.children[1].innerHTML=curentNickName;
           newItem.children[2].innerHTML=mytime;
           newItem.children[3].innerHTML=inputCtrl.value;
           targetParent.appendChild(newItem);

           let obj={

               nickname:curentNickName,
               userface:currentFace,
               chatcontent:inputCtrl.value,
               createtime:mytime
           }
           socket.emit("sendmsg",obj);
           inputCtrl.value="";
           ScrollToBotton();
        }else {
            return;
        }
    }


    //编辑事件
    function  edithEvent(e) {

        let currentImg = e.target;
        let inputTarget = document.getElementById("chatInput");
        if (!isEdit) {

            currentImg.src = "images/makesure.png";
            inputTarget.setAttribute("disabled", "disabled");


        } else {

            currentImg.src = "images/ediths.png";
            inputTarget.removeAttribute("disabled");
        }

        isEdit = !isEdit;

    }

    function  changeFaceEvent(e) {
        if(isEdit){

            let targetImg=e.target.src;
            document.getElementById("currentFace").src=targetImg;
            let url="/updateFace?url="+targetImg+"&nick="+curentNickName;
            http.open("GET",url,true);
            http.send();

            http.onreadystatechange=function()
            {
                if (http.readyState==4 && http.status==200){

                 console.log("Well");
                }
            }

        }
    }


    function getTopic() {

        let url="/getTopic";
        http.open("GET",url,true);
        http.send();

        http.onreadystatechange=function()
        {
            if (http.readyState==4 && http.status==200)
            {

                let resultData=JSON.parse(http.responseText).data;

                if(resultData!=null&&resultData.status==undefined){
                    //成功

                   let target=document.getElementById("currentTopic");

                   target.innerHTML=resultData.topicContent;

                   let face=document.getElementById("face");
                   face.src=resultData.userFace;
                   let topname=document.getElementById("topname");
                   topname.innerHTML=resultData.nickName;
                   let topcreate=document.getElementById("topcreate");
                   topcreate.innerHTML=resultData.createTime;


                   //修正时间轴

                    let targetLine=document.getElementById("lineBox");
                    let nextnode=targetLine.children[1];
                    nextnode.children[0].children[0].src=resultData.userFace;
                    nextnode.children[1].innerHTML=resultData.nickName;
                    nextnode.children[2].innerHTML=resultData.createTime;
                    nextnode.children[3].innerHTML=resultData.topicContent;
                    getTheLineInfo();

                }else {



                 }
            }
        }
    }


    //抓取时间轴数据
    function getTheLineInfo() {


        let url = "/gettimelineInfo";
        http.open("GET", url, true);
        http.send();
        http.onreadystatechange = function () {

            if (http.readyState == 4 && http.status == 200) {

                let resultData=JSON.parse(http.responseText);
                let targetParent=document.getElementById("lineBox");


                for(let i=0;i<resultData.length;i++){

                    if(resultData[i].nickName=="wwww"){

                        let example=targetParent.children[0];
                        let newItem=example.cloneNode(true);
                        newItem.children[0].children[0].src=currentFace;
                        newItem.children[1].innerHTML=curentNickName;
                        newItem.children[2].innerHTML=resultData[i].createTime;
                        newItem.children[3].innerHTML=resultData[i].chatContent;
                        targetParent.appendChild(newItem);

                    }else{

                        let example=targetParent.children[1];
                        let newItem=example.cloneNode(true);
                        newItem.children[0].children[0].src=resultData[i].userFace;
                        newItem.children[1].innerHTML=resultData[i].nickName;
                        newItem.children[2].innerHTML=resultData[i].createTime;
                        newItem.children[3].innerHTML=resultData[i].chatContent;
                        targetParent.appendChild(newItem);

                    }
                }

                // ScrollWell();
                ScrollToBotton();

            }

        }



    }

    function getPersonInfo() {

      let targetOne= document.getElementById("currentFace");
      currentFace=targetOne.getAttribute("src");
      let targetTwo=document.getElementById("username");
      curentNickName=targetTwo.innerHTML;
    }

    function ScrollWell() {


        let target=document.getElementById("innerBox");
        let targetParent=document.getElementById("lineBox");
        let currentHeight=targetParent.offsetHeight;
        if(currentHeight>=window.innerHeight){

            targetParent.style.height=currentHeight+240+"px";
            let timer=null;
            let curOffsetHeight=0;

            timer=setInterval(()=>{

                if(curOffsetHeight<=currentHeight){

                    curOffsetHeight+=60;
                    target.scrollTop=curOffsetHeight;

                }else{

                    clearInterval(timer);
                    timer=null;
                }
            },20);
        }

    }

  </script>


  </body>
</html>
